<script setup lang="ts">
defineProps({
  title: {
    type: String,
    required: true,
  }
})
</script>

<template>
  <div class="footer-item-container">
    <div class="title">{{ title }}</div>
    <div class="line"></div>
    <div class="content"><slot></slot></div>
  </div>
</template>

<style scoped lang="scss">
.footer-item-container {
  display: flex;
  flex-direction: column;
  gap: 16px;

  .title{
    width: 220px;
    height: 26px;
    opacity: 1;
    font-size: 18px;
    font-weight: bold;
    line-height: normal;
    letter-spacing: 0;
    font-feature-settings: "kern" on;
    background: linear-gradient(180deg, #FFFFFF 0%, #ECF7F0 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }

  .line{
    width: 100%;
    height: 1px;
    background: #FFFFFF;
  }

  .content{
    width: 100%;
    height: 160px;
    opacity: 1;
    //font-size: 15px;
    font-weight: bold;
    line-height: normal;
    letter-spacing: 0;
    font-feature-settings: "kern" on;
    background: linear-gradient(180deg, #FFFFFF 0%, #ECF7F0 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    position: relative;
  }

}
</style>
